
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/detail.css">
    <style>
        .shadow {
            display: none;
        }
    </style>
    <title>详情</title>
</head>
<body>
    <!-- 搜索栏 -->
    <div class="index_header">
        <div class="index_header_bg">
            <img src="https://www.hotread.com/assets/images/newlogo.png" alt="">
            <div class="hotreadAndGirl">
                <span class="on" onclick="jumpIndex()">火星小说</span>
                <span>|</span>
                <span onclick="jumpNv()">火星女频</span>
            </div>
            <div class="search-content">
                <input type="text" placeholder="龙王棺" class="search-text">
                <img src="../img/new-search-btn.png" alt="">
            </div>
            <div class="main-login">
                <div>
                    <span>书架</span>
                    <span>|</span>
                    <span>充值</span>
                </div>
                <div>
                    <span onclick="regis()" style="cursor: pointer;">注册</span>
                    <span>|</span>
                    <span style="cursor: pointer;" onclick="login()">登录</span>
                </div>
            </div>
        </div>
        <ul>
            <li style="color: #333;">热搜：</li>
            <li><span>蛇孽</span></li>
            <li><span>湘西秘闻</span></li>
            <li><span>重生1980</span></li>
        </ul>
    </div>
    <!-- 标题栏 -->
    <div class="hort-nav">
        <ul class="nav-main">
            <li class="nav-tit" style="margin-left: 0;" onclick="jumpIndex()">首页</li>
            <li class="nav-tit"  onclick="jumpRank()">排行</li>
            <li class="nav-tit"  onclick="jumpBook()">书库</li>
            <li class="nav-tit"  onclick="jumpManhua()">动漫</li>
            <li class="nav-tit"  onclick="jumpClient()">客户端</li>
            <li class="nav-tit"  onclick="jumpWelfare()">作家福利</li>
            <li class="nav-tit"  onclick="jumpAuthor()">作者中心</li>
        </ul>
    </div>
    <!-- 内容 -->
    <div class="detail-main">
        <div class="crumbs"></div>
        <div class="main">
            <!-- 左侧内容 -->
            <div class="details">
                <div class="intro"></div>
                <div class="award">
                    <ul class="award-btn">
                        <li class="award-list on">
                            月票<span class="num">0张</span>
                        </li>
                        <li class="award-list">
                            推荐票<span class="num">20张</span>
                        </li>
                        <li class="award-list">
                            打赏<span class="num">0火星币</span>
                        </li>
                    </ul>
                    <ul class="award-rect">
                        <li class="rect-list">
                            <div class="user-case">
                                <span class="curent">当前月票<em>0</em>  张</span>
                                <span class="curent">当月排名<em style="font-size: 16px;">暂无排名</em></span>
                            </div>
                            <div class="myticket">
                                <span class="curent">本月剩余月票数：<em>0</em>  张</span>
                            </div>
                            <ul class="monticket">
                                <li class="monticket-list">
                                    送<span class="tick-num">1</span>张月票
                                </li>
                                <li class="monticket-list">
                                    送<span class="tick-num">1</span>张月票
                                </li>
                                <li class="monticket-list">
                                    送<span class="tick-num">1</span>张月票
                                </li>
                                <li class="monticket-list">
                                    送<span class="tick-num">1</span>张月票
                                </li>
                                <li class="monticket-list">
                                    送<span class="tick-num">1</span>张月票
                                </li>
                            </ul>
                            <div class="explain">
                            月票说明：<br>
                            1.如何获得月票？<br>
                            订阅月票：阅读章节付费，每消费满500火星币，即可获得1张月票，每月累计最多可以获得15张月票；<br>
                            打赏月票：通过打赏作品，当月每打赏满1000火星币，即可获得1张月票，并默认将月票送给被打赏的作品。<br>
                            保底月票：用户依据上月充值的火星币数获得当月的保底月票，具体规则如下：消费满1000火星币（1张月票）、消费满5000火星币（2张月票）、消费满10000火星币（3张月票）、消费满15000火星币（4张月票）、消费满20000火星币（5张月票），此后消费每增加10000火星币，额外获赠1张保底月票，上不封顶。<br>
                            签到月票：当月累计签到21天，即可获赠2张月票（仅限客户端领取）。<br>
                            2.双倍月票活动？<br>
                            在双倍月票期间，每投递1张月票，该作品获得月票数将翻倍计算，投出1票即视为2票，超过1票以此类推。<br>
                            3.注意：<br>
                            所有月票（包含保底、订阅和打赏、签到月票）一律当月有效，过期作废，不可延期使用。<br>
                            </div>
                            <div class="shadows" style="width: 100%;height: 50px; background-color: #fff;"></div>
                            <div class="catalog" id="catalogContainer">
                                <dl class="catalog-rect on">
                                <dt class="roll"><i class="rolli"></i>正文卷</dt>
                                <dd>
                                    <div class="catalog-list">
                                    <a href="">第一章 ‘逃兵’拯救601</a>
                                    <a href="">第二章 ： 相控阵火控雷达</a>
                                    <a href="">第三章 尖端技术</a>
                                    <a href="">第四章 超越常识，三代半的潜力？</a>
                                    <a href="">　第五章 新的计算</a>
                                    <a href="">　第六章 耻辱</a>
                                    <a href="">　第七章 怪人</a>
                                    <a href="">第八章 走！吃饭去！</a>
                                    <a href="">　第九章 钓鱼?</a>
                                    <a href="">第十章 敢立军令状！</a>
                                    </div>
                                    <p class="moreBox"><a class="mores" href="">查看更多目录</a></p>
                                </dd>
                                </dl>
                            </div>
                            <div class="record">
                                <div class="record-tit">今日投票记录</div>
                                <ul class="record-rect">
                                    <li class="record-list">
                                        <img src="https://c-ssl.duitang.com/uploads/blog/202404/04/5zSl2JGVTOpMg44.jpeg" alt="" class="record-img">
                                        <div class="record-cont">
                                            <p class="record-txt">吾生之地什么时候开始更新</p>
                                            <p class="record-txt">
                                                <span class="record-time">2025-07-31 08:12:09</span>
                                                <span class="record-goods">打赏了 1 张月票</span>
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 右侧列表 -->
            <div class="main-right">
                <div class="author-explain">
                    <div class="boybg">
                        <img src="https://p2.duyao001.com/image/article/15bcc989e86a8b1deb2dcc7286b23e59_150x150.png" alt="" class="author-tx">
                        <div class="author-name">零度加冰</div>
                    </div>
                    <p class="author-sent">个人说明：...</p>
                    <div class="author-works">
                        <div class="works-title">作者其他作品</div>
                        <div class="other">无其他作品</div>
                    </div>
                </div>
                <div class="ranking">
                    <div class="rank-title">猜你喜欢</div>
                    <ul class="rank-lists"></ul>
                </div>
                <div class="ranking">
                    <div class="ranktop">
                        <div class="rank-title">完本榜</div>
                        <div class="rank-more">
                            <p class="rank-time timeon">周</p>
                            <p class="rank-time">月</p>
                            <p class="rank-time">总</p>
                        </div>
                    </div>
                    <ul class="rank-bottom"></ul>
                </div>
                <div class="ranking">
                    <div class="ranktop">
                        <div class="rank-title">新书榜</div>
                        <div class="rank-more">
                            <p class="rank-time2 timeon">日</p>
                            <p class="rank-time2">周</p>
                            <p class="rank-time2">月</p>
                        </div>
                    </div>
                    <ul class="rank-bottom2"></ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 二维码 -->
    <div class="erwei">
        <div class="erevent">
            <span class="edel" onclick="del()">x</span>
            <p class="sm">扫码付费阅读</p>
            <p class="eread">畅享全文阅读体验</p>
            <img class="epic" src="https://c.hotread.com/boyPc/assets/images/qrcode.jpg" alt="">
        </div>
    </div>
</body>
<script>
    function regis() {
        location.href='./register.html?'
    }
    function jumpIndex(){
        location.href='./index.html?'
    }
    function jumpNv(){
        location.href='./channel.html?'
    }
    function login(){
        location.href=`./personal.html`
    }
    function jumpManhua(){
        location.href='./comic.html?'
    }
    function jumpBook(){
        location.href='./book.html?'
    }
    function jumpAuthor(){
        location.href='./personal.html?'
    }
    function jumpRank(){
        location.href='./rank.html?'
    }
    function jumpClient(){
        location.href='./client.html?'
    }
    //渲染书籍信息
console.log("原始 search:",location.search);
// 步骤1:提取 ?后面的内容(去掉开头的 ?)
const jsonstr= location.search.slice(1);
// 步骤2:URL 解码(还原 JSON 字符串)
const decodedstr=decodeURIComponent(jsonstr);
//步骤3:解析为 Javascript 对象
const bookData= JSON.parse(decodedstr);
console.log(111111111,bookData);
//步骤4:渲染
const crumbs=document.querySelector('.crumbs')
crumbs.innerHTML=`
  <p class="crumbs-nav">首页</p>
  <p class="crumbs-nav">${bookData.type}</p>
  <p class="chcolor">${bookData.name}</p>
`
const intros=document.querySelector('.intro')
intros.innerHTML=`
  <div class="intro-sip">
    <img class="bookimg"src="${bookData.cover}" alt="">
    <div class="intro-wz">
        <h1>${bookData.name}</h1>
        <span class="author">${bookData.author}</span>
        <p class="classify">
            分类：<span class="sort">${bookData.type}</span>
        </p>
        <p class="classify">
            标签：<span class="sort">${bookData.tag}</span>
        </p>
        <p class="classify">字数：${bookData.wordNumber}</p>
        <div class="state">
            <span class="doing">连载中：</span>
            <span class="cont">${bookData.latestChapter}</span>
            <span class="time">2025-08-23 09:00:00</span>
        </div>
        <div class="btn">
            <div class="btn-left">
                <p class="read bg" onclick="paid()">立即阅读</p>
                <p class="read">加入书架</p>
            </div>
            <div class="btn-right">
                <div class="twocode">
                    <img class="ctimg" src="https://c.hotread.com/boyPc/assets/images/qrcode.jpg" alt="">
                </div>
                <div class="transpond">
                    <img class="ctimg-two" src="https://c.hotread.com/boyPc/assets/images/qrcode.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="intro-con">
  <ul class="detail-nav">
      <li class="win-head" style="border-bottom: 3px solid #c54954;">简介</li>
      <li class="win-head">目录</li>
      <li class="win-head">评论</li>
  </ul>
  <div class="introduce">
      <p class="text">${bookData.introduce}</p>
  </div>
</div>
`
</script>
<script src="../js/detail.js"></script>
</html>